import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    DataItem
} from './../../types/types';

interface Props {
    data: any
}

import icon_1 from './../../images/profile/icon-1.png';
import icon_2 from './../../images/profile/icon-2.png';
import icon_3 from './../../images/profile/icon-3.png';
import icon_4 from './../../images/profile/icon-4.png';

class Basic extends PureComponent<Props> {
    static defaultProps = {
        data: {}
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get height() {
        const {
            height
        } = this.Data;
        return height || {} as DataItem;
    }

    get relation() {
        const {
            relation
        } = this.Data;
        return relation || {} as DataItem;
    }

    get body()  {
        const {
            body
        } = this.Data;
        return body || {} as DataItem;
    }

    get education() {
        const {
            education
        } = this.Data;
        return education || {} as DataItem;
    }

    get gender() {
        const {
            gender
        } = this.Data;
        return gender || {} as DataItem;
    }

    get marital() {
        const {
            marital
        } = this.Data;
        return marital || {} as DataItem;
    }

    get haveChildren() {
        const {
            haveChildren
        } = this.Data;
        return haveChildren || {} as DataItem;
    }

    get smoke() {
        const {
            smoke
        } = this.Data;
        return smoke || {} as DataItem;
    }

    get drink() {
        const {
            drink
        } = this.Data;
        return drink || {} as DataItem;
    }

    get location() {
        const {
            location = {}
        } = this.Data;

        const {
            city = {},
            state = {},
            country = {}
        } = location || {};

       return [city,state,country];
    }

    get matchAge() {
        const {
            matchAge
        } = this.Data;
        return matchAge || {};
    }

    get matchGender() {
        const {
            matchGender
        } = this.Data;
        return matchGender || []
    }

    private getLabel = (items:Array<any>) => (
        items.map(
            ({label}:any) => label
        ).filter(v => !!v).join(`,`)
    )

    private getMatchLabel = () => {
        const {
            min = 18,
            max = 100
        } = this.matchAge;

        return this.getLabel([...this.matchGender,{
            label:`${min}-${max}yrs`
        }])
    }

    get LifeStyle() {
        return [{
            icon:icon_1,
            label:this.getLabel([
                this.gender,
                this.height,
                this.body
            ])
        },{
            icon:icon_2,
            label:this.getMatchLabel()
        },{
            icon:icon_3,
            label:this.getLabel([
                this.smoke,
                this.drink,
                this.marital,
                this.education,
                this.haveChildren
            ])
        },{
            icon:icon_4,
            label:this.getLabel(
                this.location
            )
        }]
    }

    private renderItem = (
        item:any,i:number
    ) => {
        const {
            label
        } = item;

        return (
            <View key={i} style={styles.itemStyle}>
                <Image
                    source={item.icon}
                    style={styles.iconStyle}
                />
                <Text style={styles.textStyle}>
                    {label || `No filled`}
                </Text>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                {this.LifeStyle.map(this.renderItem)}
            </View>
        );
    }
}

export default Basic;

const styles = StyleSheet.create({
    container:{
        paddingHorizontal:16
    },
    nameStyle:{
        fontSize:12,
        fontWeight:`700`,
        color:`#8A92AE`
    },
    textStyle:{
        fontSize:16,
        lineHeight:24,
        color:`#666`,
        flex:1,
        marginTop:-1
    },
    iconStyle:{
        marginRight:10
    },
    itemStyle:{
        marginBottom:18,
        flexDirection:`row`
    }
}) as any;